<template>
  <div class="app-container">
    <el-row>
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span class="role-span">订单详情</span>
        </div>

        <el-form ref="viewForm" :model="viewForm" label-width="120px" size="small">
          <el-row>
            <div class="index-row">
              <el-col :span="8">
                <el-form-item label="订单号：" prop="orderSn">
                  {{ viewForm.orderSn }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户名：">
                  {{ viewForm.customerName }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="审核状态：">
                  {{ viewForm.auditStatusName }}
                </el-form-item>
              </el-col>
            </div>
          </el-row>
          <el-row>
            <!-- 第二行 -->
            <el-col :span="8">
              <el-form-item label="订单金额(元)：">
                {{ viewForm.amount }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单类型：">
                {{ viewForm.contractTypeName }}
              </el-form-item>
            </el-col>              
            <el-col :span="8">
              <el-form-item label="订单状态: ">
                {{ viewForm.orderStatusName }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="录单人：">
                {{ viewForm.opName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="录入时间：">
                {{ viewForm.createdAt | formatDate('yyyy-MM-dd hh:mm') }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="录入备注：">
                {{ viewForm.remark }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="审核备注:">
                {{ viewForm.auditRemark }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-row>

    <el-card class="box-card" shadow="never" style="margin-top: 24px">
      <el-tabs v-model="activeName" @tab-click="handleTabChange">
        <el-tab-pane label="课程订购详情" name="courses">
          <order-course :order-course-list="orderCourseList" />
        </el-tab-pane>
        <!-- <el-tab-pane label="审核记录" name="audits" /> -->
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { detail } from '@/api/order'
import { listCourseByOrder } from '@/api/course'
import orderCourse from '../../components/order/OrderCourse'

export default {
  components: {
    orderCourse
  },
  data() {
    return {
      readonly: true,
      activeName: 'courses',
      viewForm: {},
      orderCourseList: []
    }
  },
  mounted() {
    detail(this.$route.params.orderSn).then(res => {
      this.viewForm = res.data
      if (this.viewForm.orderSn) {
        listCourseByOrder({
          orderSn: this.viewForm.orderSn
        }).then((res) => {
          this.orderCourseList = res.data
        }).finally((err) => {
          console.log(err)
        })
      }
    })
  },
  methods: {
    handleTabChange(tab, event) {

    }
  }
}
</script>

<style scoped>
</style>
